<!-- 示例页面 -->
<template>
  <view class="cntr">
    <view class="wrapper fxcc wh-f">

      <view class="wra1 grid gap-2 wh-f">
        <view class="fxcc fsrem5 wh-f bg-[red]">1</view>
        <view class="fxcc fsrem5 wh-f bg-[orange] col-span-2 row-span-2" >2</view>
        <view class="fxcc fsrem5 wh-f bg-[green]">3</view>
        <view class="fxcc fsrem5 wh-f bg-[blue]">4</view>
        <view class="fxcc fsrem5 wh-f bg-[purple]">5</view>
        <view class="fxcc fsrem5 wh-f bg-[#f8d29d]">6</view>
        <view class="fxcc fsrem5 wh-f bg-[#b4a87f]">7</view>
        <view class="fxcc fsrem5 wh-f bg-[#d0e4a8]">8</view>
        <view class="fxcc fsrem5 wh-f bg-[#4dc7ec]">9</view>
      </view>

    </view>

    <view>
      <!-- 弹框 -->
    </view>

  </view>
</template>

<route lang="json">{
  "style": {
    "navigationStyle": "custom",
    "navigationBarTitleText": "首页"
  }
}</route>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
.cntr {
  height: 100vh;
}

.wra1 {
  grid-template-columns: 100px auto 100px;
  // grid-template-rows: repeat(3, 33%);
  // grid-template-rows: repeat(3, 33.33%);
}
</style>
